import React, { Fragment, PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import {
  Tag,
  Button,
  Card,
  Col,
  Form,
  Icon,
  Input,
  Row,
  Select,
  Switch,
  Divider,
  Modal,
} from 'antd';
import TableList from '@/components/TableList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../search.less';
const FormItem = Form.Item;
const { Option } = Select;
@connect(
  state => ({
    dataqueryInfoList: state.infoStatistics.dataqueryInfoList,   
    loadingqueryInfoList: state.loading.effects['infoStatistics/queryInfoList'],   
  }),
  dispatch => ({
    queryInfoList: e => dispatch({ type: 'infoStatistics/queryInfoList', payload: e }),   
  })
)
@Form.create()
class infoStatistics extends PureComponent {
  state = {
    selectedRows: [],   
  };

  columns = [
    {
      title: '数据库名称',
      dataIndex: 'dbName',
    },
    {
      title: '库数量',
      dataIndex: 'dbNum',
    },   
    {
      title: '表数量',
      dataIndex: 'tableNum',
    },
    {
      title: '敏感表数量',
      dataIndex: 'senstableNum',
    },
    {
      title: '字段数量',
      dataIndex: 'columnNum',
    },
    {
      title: '敏感字段数量',
      dataIndex: 'senscolumnNum',
    },
    {
      title: '操作',
      width: 100,
      render: (text, record) => (
        <Fragment>          
          <a onClick={() => this.moreStatistics(text)}>详情</a>
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    this.pageInfoList();  
  }
 
  // 分页查询列表
  pageInfoList(res, pageSize = 10, pageNum = 0) {
    const values = {
      ...this.state.formValues,    
      pageSize: pageSize,
      pageNum: pageNum,
    };  
    this.props.queryInfoList(values);

  }
  handleStandardTableChange(pagination, filters, sorter) {
    const { formValues } = this.state;
    // 分页请求
    this.pageInfoList(formValues, pagination.pageSize, pagination.current - 1);
  }

  moreStatistics = text => {
    router.push(
      `./moreStatistics?dbId=${text.dbId}`
    );
  }; //查看详情

  //查询
  handleSearch = e => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        formValues: fieldsValue,
      });     
      this.pageInfoList(fieldsValue);
    });
  };

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="数据库名称">
              {getFieldDecorator('dbName')(
               <Input placeholder="请输入" />
              )}
            </FormItem>
          </Col>
         
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    return this.renderSimpleForm();
  }

  render() {
    const { selectedRows } = this.state;
    const { loadingqueryInfoList, dataqueryInfoList } = this.props;

    return (
      <PageHeaderWrapper title="敏感信息统计">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderForm()}</div>           
            <TableList
              className={styles.tdPadding}            
              selectedRows={selectedRows}
              loading={loadingqueryInfoList}
              data={dataqueryInfoList}
              columns={this.columns}            
              onChange={this.handleStandardTableChange.bind(this)}
              rowKey={record => record.id}
              hideRowSelection           
            />
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default infoStatistics;
